<template>
  <div>
    <a-tabs :default-active-key="activeKey" @change="tabChange">
      <a-tab-pane :key="tab.key" :tab="tab.name" v-for="tab in tabs">
        <a-list item-layout="horizontal" :data-source="listData[tab.key]">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta
              :data-index="index"
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            >
              <a slot="title" href="https://www.antdv.com/">{{ item.title }}</a>
              <a-avatar
                slot="avatar"
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              />
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default() {
        return [
          {
            name: "tab1",
            key: "tab1",
          },
          {
            name: "tab2",
            key: "tab2",
          },
          {
            name: "tab3",
            key: "tab3",
          },
        ];
      },
    },
  },
  data() {
    return {
      activeKey: "",
      listData: {
        tab1: [
          {
            title: "tab1",
          },
          {
            title: "Ant Design Title 2",
          },
          {
            title: "Ant Design Title 3",
          },
          {
            title: "Ant Design Title 4",
          },
        ],
        tab2: [
          {
            title: "tab2",
          },
          {
            title: "Ant Design Title 2",
          },
          {
            title: "Ant Design Title 3",
          },
          {
            title: "Ant Design Title 4",
          },
        ],
        tab3: [
          {
            title: "tab3",
          },
          {
            title: "Ant Design Title 2",
          },
          {
            title: "Ant Design Title 3",
          },
          {
            title: "Ant Design Title 4",
          },
        ],
      },
    };
  },
  mounted() {
    if (this.tabs && this.tabs.length > 0) {
      this.activeKey = this.tabs[0].key;
      this.tabChange(this.activeKey);
    }
  },
  methods: {
    tabChange(key) {
      this.$emit("change", key, (data) => {
        this.setListData(key, data);
      });
    },
    setListData(key, data) {
      this.$set(this.listData, key, data);
    },
  },
};
</script>

<style></style>
